@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

// mixin混合：定义样式片段
// 带参数默认值的
@mixin center ($px:1220px) {
   width: $px;

   margin: {
      left: auto;
      right: auto;
   }

   ;
}

//main

main{
   min-height: 640px;
}
tbody{
   min-width: 640px;
}
.page-cart {
   @include center(1220px);
   box-sizing: border-box;
   background-color: pink;
   margin-top: -25px;
   position: relative;
   background: #fff;
   border-radius: 8px;
   border: 1px solid #dcdcdc;
   border-color: rgba(0, 0, 0, .14);
   box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);

   &-title {
      height: 60px;
      border-bottom: 1px solid #dcdcdc;
      padding-left: 20px;
      box-sizing: border-box;
      padding-top: 20px;
      color: rgba(0, 0, 0, .6);
      font-size: 12px;
   }

   &-list {
      width: 100%;
      // background-color: pink;
      font-size: 14px;

      thead {
         background-color: #f5f5f5;

         th {
            box-sizing: border-box;
            // padding-top: 10px;
            font-weight: normal;
            color: #838383;
            height: 40px;
            font-weight: bold;
            border-bottom: 1px solid #dcdcdc;
         }

         th:nth-child(1) {
            width: 50%;
            text-align: left;
            padding-left: 20px;
         }
      }

      tbody {
         tr {
            height: 150px;
            text-align: center;
            border-bottom: 1px dotted #d9d9d9;
            .noText{
               user-select:none;
            }
         }

         .content {
            position: relative;

            input {
               position: absolute;
               width: 20px;
               height: 20px;
               left: 20px;
               top: 50%;
               border-radius: 50%;
               margin-top: -10px;
            }
            img{
               position: absolute;
               left: 80px;
               top: 50%;
               margin-top: -40px;
               border-radius: 8px;
               border: 1px solid #dcdcdc;
               width:80px;
               height: 8s0px;
            }
            h2{
               color: #333;
               font-size: 16px;
               font-weight: 700;
               // margin-left: -20px;
               position: absolute;
               left: 175px;
               top: 50px;
            }
            h5{
               font-weight: normal;
               margin-top: 38px;
               color: #999;
               font-size: 12px;
               // margin-left: -225px;
               // background-color: skyblue;
               padding-left: 10px;
               width: 200px;
               text-align: left;
               margin-left: 165px;
            }
         }
         h3{
            color: #666;
            font-size: 14px;
            font-weight: normal;
         }
         .btn{
           display: inline-block;
           background-color: #fdfdfd;
           border: 1px solid #f1f1f1;
           width: 20px;
           height: 20px;
           line-height: 20px;
           border-radius: 50%;
           font-size: 15px;
           color: #686565;
           text-align: center;
           box-shadow: 2px 2px 5px #aaaaaa;
           cursor: pointer;
           &:hover{
              background-color: skyblue;
              box-shadow: 2px 2px 5px darkblue;
              border: 1px solid skyblue;
           }
         }
         .num{
            width: 36px;
            height: 18px;
            border: none;
            border-radius: 3px;
            line-height: 18px;
            text-align: center;
            font-size: 14px;
            padding: 0;
            background-color: transparent;
            font-weight: 700;
            color: #626262;
         }
         .price{
            font-weight: 700;
            color: #666;
            font-size: 14px;
         }
      }

   }
   .buy{
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      &-left{
         display: flex;
         align-items: center;
         font-size: 14px;
         font-weight: 700;
         input{
           width: 20px;
           height: 20px;
         }
         span{
            padding: 0 5px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
         }
         span:nth-child(4),span:nth-child(3){
            color: #bbb;
         }
      }
      &-right{
         display: flex;
         align-items: center;
        button{
           width: 130px;
           height: 50px;
           border: none;
           background: #567ce6 linear-gradient(#799cea,#567ce6);
           box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 -1px 2px rgba(0,0,0,.2);
           color: #fff8f9;
           font-weight: 700;
           font-size: 16px;
           border-radius: 10px;
           &:hover{
            background: #6484d0 linear-gradient(#7592d4,#5272c6);
           }
        }
        div{
           display: flex;
           align-items: center;
           margin-right: 20px;
           color: #323232;
           font-weight: 700;
           font-size: 15px;
           h2{
              padding: 0 10px;
              font-size: 18px;
              color: #d44d44;
           }
           p{
             padding: 0 10px;
             color: #f1f1f1;
             font-weight: normal;
             font-size: 20px;
           }
           h3{
              padding: 0 10px;
              font-size: 18px;
              color: #d44d44;
              
           }
        }
      }
   }
   .empty{
      display: none;
      position: absolute;
      width: 100%;
      height: 520px;
      // background-color: pink;
      border-radius: 8px;
      border: 1px solid #999999;
      box-sizing: border-box;
      background: url('/images/header/empty.png') no-repeat center center;
      p{
         text-align: center;
         padding-top: 420px;
         color: #333333;
         font-size: 14px;
      }
      a{
         display: block;
         width: 140px;
         height: 46px;
         border: 1px solid #e1e1e1;
         color: #646464;
         background-color: #f9f9f9;
         background-image: linear-gradient(180deg,#fff,#f9f9f9);
         text-align: center;
         line-height: 46px;
         border-radius: 8px;
         margin: 0 auto;
         margin-top: 10px;
         &:hover{
            background-color: #eee;
            background-image: linear-gradient(180deg,#f5f5f5,#eee);
         }
      }
   }
}
